<html>
<head>
<style>
#streams {
	height:100%;
	width:1000%;
}

#streams div.stream {
	height:100%;
	width:200px;
	float:left;
}

#streams div.stream img {
	width:40px;
}

#streams div.stream span {
	width:160px;
}

</style>

<script src="http://api.feedgraph.com/js/feedgraph.js"></script>
<script src="party.js"></script>
<script src="temper.js"></script>

<script>

/* templates */
temper.include("templates/chat.html");
var chatItem = temper.script("chat-item");

var name = null;

function onChatToMe(obj) {

	chatItem.append("SternReuben", obj);
}

function init() {

	name = prompt("enter twitter name:") || "anonymous";

	
	registerChatHandler(name, onChatToMe);
	getStream("SternReuben");
}

function onSendChat(e) {

	chatToHost(name, e.currentTarget.value);

	e.currentTarget.value = "";
}

function getStream(from) {

	var existing = document.getElementById(from);

	if (existing) return existing;

	var child = document.createElement("div");
	child.id = "container-" + from;
	child.className = "stream";

	var heading = document.createElement("h1");
	heading.textContent = from;

	child.appendChild(heading);

	var chats = document.createElement("div");
	chats.id = from;

	child.appendChild(chats);

	var input = document.createElement("input");
	input.type = "text";
	input.to = from;
	input.addEventListener("change", onSendChat);
	
	child.appendChild(input);

	var streams = document.getElementById("streams");
	streams.appendChild(child);

	return chats;
}

</script>

</head>
<body onload=init()>
<div id=streams class=streams></div>
</body>
</html>
